<template>
  <div class="left-menu">

    <el-row class="tac">
      <el-col>
        <el-menu
          class="left-menu"
          @open="handleOpen"
          @close="handleClose"
          background-color="#545c64"
          text-color="#fff"
          active-text-color="#ffd04b">

          <router-link to="/">
            <el-menu-item index="1">
              <i class="el-icon-menu"></i>
              <span slot="title">首页</span>
            </el-menu-item>
          </router-link>

          <router-link to="/customer" v-if="$store.state.user.grade > 0">
            <el-menu-item index="2">
              <i class="el-icon-service"></i>
              <span slot="title">人员管理</span>
            </el-menu-item>
          </router-link>

          <el-submenu index="3">
            <template slot="title">
              <i class="el-icon-setting"></i>
              <span>任务管理</span>
            </template>

            <router-link to="/will/task" v-if="$store.state.user.grade > 0">
              <el-menu-item index="3-1">
                <i class="el-icon-caret-right"></i>
                待分配任务
              </el-menu-item>
            </router-link>

            <router-link to="/customer/task">
              <el-menu-item index="3-2">
                <i class="el-icon-caret-right"></i>
                客服任务列表
              </el-menu-item>
            </router-link>

            <router-link to="/task/rule" v-if="$store.state.user.grade > 0">
              <el-menu-item index="3-3">
                <i class="el-icon-caret-right"></i>
                分配规则
              </el-menu-item>
            </router-link>

            <router-link to="/recycle/task" v-if="$store.state.user.grade > 0">
              <el-menu-item index="3-4">
                <i class="el-icon-caret-right"></i>
                任务回收
              </el-menu-item>
            </router-link>
          </el-submenu>

          <router-link to="/money">
          <el-menu-item index="4">
            <i class="el-icon-document"></i>
            <span slot="title">提成管理</span>
          </el-menu-item>
          </router-link>

        </el-menu>
      </el-col>

      <div class="notice">
        <p>客服服务系统</p>
        <p>盈盈理财 <a href="/static/操作文档.docx" target="_blank" style="color: #303133">操作文档<i class="el-icon-document"></i></a></p>
      </div>
    </el-row>

  </div>
</template>

<script>
  export default {
    name: 'left-menu',
    data () {
      return {
      }
    },
    methods: {
      handleOpen(key, keyPath) {
        console.log(key, keyPath);
      },
      handleClose(key, keyPath) {
        console.log(key, keyPath);
      }
    }
  }
</script>

<style lang="less" scoped>
  .left-menu {
    height: 95vh;

    .notice {
      position: absolute;
      margin-top: 90vh;
      margin-left: 10%;
      font-size: 14px;
      color: #909399;
    }
  }
</style>
